<template>
	<view>
		<view class="head">
			<text>选择提现方式</text>
			<view>
				<checkbox-group @change="checkBoxChange">
					<label>
						<checkbox value="cb" :checked="state1">手动提现</checkbox>
					</label>
					<label>
						<checkbox value="cb" :checked="state2">自动提现</checkbox>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="content">
			<view class="card">
				<text>提现至</text>
				<picker mode="selector" @change="bindPickerChange" :range="array">
					<label>{{array[index]}} ></label>
				</picker>
			</view>
		    <view class="tixian" v-if="state1==true">
				<input type="text" placeholder="输入提现金额" class="input"/>
				<text>全部提现</text>
			</view>
			<view class="date" v-if="state2==true">
				<text>提现日期</text>
				<text class="time">每天 9:00 ></text>
			</view>
			<view style="margin: 31rpx 30rpx 19rpx 30rpx;border-bottom: 2rpx solid #EEEEEE;"></view>
			<view class="total">￥12456.6可提现</view>
			<view class="footer">
				<button type="button">确认</button>
				<text>提现申请后将在1-3个工作日打入你的钱包</text>
			</view>
			<view class="title">明细</view>
			<view class="detail">
				<view>
					<text class="txt1">提现</text>
					<text class="txt2">{{money}}</text>
				</view>
				<view>
					<text class="txt3">提现到支付宝</text>
					<text class="txt3">{{datatime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			array:['农业银行卡0568', '工商银行卡6666', '建设银行卡9999'],
			index:0,
			money:-12,
			datatime:'05-12  15:30',
			state1:true,
			state2:false
		}
	},
	methods: {
		bindPickerChange(e){
			this.index = e.target.value
		},
		checkBoxChange(e) {
			this.state1 = !this.state1
			this.state2 = !this.state2
		}
	}
}
</script>
<style lang="scss">
	page {
		background: rgb(245, 245, 245);
	}
	.head {
		border-top: 1px solid #EEEEEE;
		height: 117rpx;
		line-height: 117rpx;
		width: 675rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		padding: 0rpx 45rpx 0rpx 30rpx;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
		text {
			font-size: 34rpx;
		}
	}
	checkbox .wx-checkbox-input {
	    border-color:#FEB140;  
	    border-radius: 50%;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #FEB140;
	}
	label {
		margin-left: 30rpx;
	}
	.content {
		width: 750rpx;
		height: 1021rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
	}
	.card {
		display: flex;
		flex-direction: row;
		margin-left: 30rpx;
		padding-top: 40rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #2E2E2E;
		picker {
			margin-left: 300rpx;
		}
	}
	.tixian {
		margin-left: 30rpx;
		margin-top: 67rpx;
		width: 720rpx;
		height: 60rpx;
		position: relative;
	}
    .tixian text {
		position: absolute;
		top: 10rpx;
		right: 58rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FEB140;
	}
	.date {
		margin-top: 59rpx;
		margin-left: 30rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #2E2E2E;
	}
	.time {
		margin-left: 400rpx;
	}
	.total {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-left: 30rpx;
	}
	.footer button {
		width: 680rpx;
		height: 94rpx;
		margin: 47rpx 35rpx 23rpx 35rpx;
		line-height: 94rpx;
		background: #FEB140;
		border-radius: 47rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1B1B1B;
		font-weight: 400;
	}
	.footer text {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-left: 154rpx;
	}
	.title {
		margin-left: 39rpx;
		margin-top: 94rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1B1B1B;
	}
	.detail {
		display: flex;
		flex-direction: column;
		margin-left: 39rpx;
		margin-top: 48rpx;
		font-family: Source Han Sans CN;
		view {
			display: flex;
			flex-direction: row;
			width: 672rpx;
			justify-content: space-between;
		}
		.txt1 {
			font-size: 24rpx;
			font-weight: 500;
			color: #1B1B1B;
		}
		.txt2 {
			font-size: 32rpx;
			font-weight: 400;
			color: #F61B00;
		}
		.txt3 {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}
	}
</style>
